<template>
  <Button v-bind="$attrs" :disabled="isStart" @click="handleStart" :loading="loading">
    {{ getButtonText }}
  </Button>
  <ManMachineVerifyModal @register="registerVerifyModal" @submit="doStart" />
</template>
<script lang="ts">
  import { defineComponent, ref, watchEffect, computed, unref } from "vue"
  import { Button } from "ant-design-vue"
  import { useCountdown } from "./useCountdown"
  import { isFunction } from "/@/utils/is"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { useModal } from "/@/components/Modal"
  import ManMachineVerifyModal from "/@/components/BizVerify/src/ManMachineVerifyModal.vue"
  const props = {
    value: { type: [Object, Number, String, Array] },
    count: { type: Number, default: 60 },
    bizType: { type: String },
    toUser: { type: String },
    taskCode: { type: String },
    // 是否开启人机校验
    enableManMachineVerify: { type: Boolean, default: false },
    beforeStartFunc: {
      type: Function as PropType<(arg?: Recordable) => Promise<boolean | undefined>>,
      default: null,
    },
  }

  export default defineComponent({
    name: "CountButton",
    components: { Button, ManMachineVerifyModal },
    props,
    emits: ["submitVerifyInfo"],
    setup(props, { emit }) {
      const loading = ref(false)
      // 用于人机验证
      const [registerVerifyModal, { openModal: openVerifyModal }] = useModal()

      const { currentCount, isStart, start, reset } = useCountdown(props.count)
      const { t } = useI18n()

      const getButtonText = computed(() => {
        return !unref(isStart) ? t("component.countdown.normalText") : t("component.countdown.sendText", [unref(currentCount)])
      })

      watchEffect(() => {
        props.value === undefined && reset()
      })

      async function doStart(data?: any) {
        const { beforeStartFunc } = props
        if (beforeStartFunc && isFunction(beforeStartFunc)) {
          loading.value = true
          try {
            const canStart = await beforeStartFunc({
              captchaValue: data?.captchaValue,
              captchaType: data?.captchaType,
              bizType: props.bizType,
              taskCode: props.taskCode,
              captchaToken: data?.token,
              toUser: props.toUser || "user",
            })
            emit("submitVerifyInfo", {
              toUser: props.toUser || "user",
              captchaValue: data?.captchaValue,
              captchaType: data?.captchaType,
              captchaToken: data?.token,
            })
            canStart && start()
          } finally {
            loading.value = false
          }
        } else {
          start()
        }
      }

      /**
       * @description: Judge whether there is an external function before execution, and decide whether to start after execution
       */
      async function handleStart() {
        props.enableManMachineVerify ? openVerifyModal(true, {}) : doStart()
      }
      return {
        handleStart,
        currentCount,
        loading,
        getButtonText,
        isStart,
        registerVerifyModal,
        doStart,
      }
    },
  })
</script>
